import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import { api_member_info_bankList, api_member_info_delBank } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import Colors from '../constants/Colors';
import { show } from '../constants/Toast';
import { CommonModal } from '../components/Modal';
import MyListView from '../components/MyListView';

export default class BankCardListScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData(1);
        })
    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyRightImageHeader title='我的银行卡' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }}
                    rightImg={require('../res/me_grxx.png')} rightClick={() => {
                        this.props.navigation.navigate('AddBank')
                    }} />
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    EmptyView={
                        <View style={{ height: 450 * unitWidth, alignItems: 'center', justifyContent: 'center' }}>
                            <Image style={{
                                width: 328 * unitWidth,
                                height: 241 * unitWidth,
                            }} source={require('../res/ic_me_yhk.png')} resizeMode='stretch' />
                            <Text style={{ fontSize: 17 }}>暂时还未绑定任何银行卡，<Text style={{ color: Colors.colorOrange }} onPress={() => {
                                this.props.navigation.navigate('AddBank')
                            }}>去绑定</Text></Text>
                        </View>
                    }
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                />
                <CommonModal ref='CommonModal' title='确定删除该银行卡信息？' comfirmText='确定' cancelText='取消'
                    comfirmClick={this.delete.bind(this)} />
            </View>
        );
    }

    getItem({ item, index }) {
        return (
            <ImageBackground style={{
                width: 344 * unitWidth,
                height: 133 * unitWidth,
                alignSelf: 'center',
                marginTop: 10 * unitWidth
            }} source={this.getBankBg(index)} resizeMode='stretch'>
                <Text style={{ color: Colors.white, fontSize: 17, marginLeft: 15 * unitWidth, marginTop: 30 * unitWidth }}>{item.opening_bank}</Text>
                <Text style={{ color: Colors.white, fontSize: 24, marginLeft: 15 * unitWidth, marginTop: 15 * unitWidth }}>****  ****  ****  {item.card_number.substring(item.card_number.length - 4, item.card_number.length)}</Text>
                <View style={{ position: 'absolute', right: 15 * unitWidth, top: 15 * unitWidth, flexDirection: 'row' }}>
                    <TouchableOpacity onPress={() => {
                        this.refs.CommonModal.showModal();
                        this.deleteId = item.id;
                    }}>
                        <Text style={{ color: Colors.white, fontSize: 16, marginLeft: 15 * unitWidth }}>删除</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        )
    }

    getBankBg(index) {
        if (index % 2 == 0) {
            return require('../res/me_yhkk1.png')
        } else if (index % 2 == 1) {
            return require('../res/me_yhkk2.png')
        }
    }

    //获取
    getData(page) {
        let params = {

        }
        postFetch(api_member_info_bankList, params, {
            success: (response) => {
                if (page == 1) {
                    this.refs.MyListView.onHasMore();
                    this.setState({
                        list: response.result,
                    })
                } else {
                    if (response.result && response.result.length > 0) {
                        this.refs.MyListView.onHasMore();
                        this.setState({
                            list: this.state.list.concat(response.result),
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                this.refs.MyListView.onNoMore();
                show(response.result.message);
            }
        })
    }

    delete() {
        let params = {
            "id": this.deleteId,
        }
        postFetch(api_member_info_delBank, params, {
            success: (response) => {
                show('删除成功');
                this.getData(1);
                this.refs.CommonModal.hideModal();
            },
            fail: (response) => {
                show(response.result);
                this.refs.CommonModal.hideModal();
            }
        })
    }
}